{% extends 'base.html' %}

{% block body %}
{# UNVALIDATED USERS BLOCK #}
<div id='unvalidatedUsersBox'>
{% if unvalidatedUsersArr %}
  <div class='box'>
    {{ 'There are users waiting for validation of their account:'|trans|msg('warning', false) }}
    <ul>
    {% for user in unvalidatedUsersArr %}
      <li>
        {{ user.fullname }} ({{ user.email }}) <button type='button' class='btn btn-primary' data-action='validate-user' data-userid='{{ user.userid }}'>{{ 'Validate'|trans }}</button> <button type='button' class='btn btn-danger' data-action='destroy-user' data-userid='{{ user.userid }}'>{{ 'Delete'|trans }}</button>
      </li>
    {% endfor %}
    </ul>
  </div>
{% endif %}
</div>

{# ADMIN PANEL MAIN MENU #}
<ul class='tabbed-menu'>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='1'>{{ 'Team'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='2'>{{ 'User Groups'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='3'>{{ 'Users'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='4'>{{ 'Export'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='5'>{{ 'Tag manager'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='6'>{{ 'Batch actions'|trans }}</button></li>
</ul>

{# loading spinner #}
<div class='d-flex justify-content-center' id='loading-spinner'>
  <div class='lds-dual-ring'></div>
</div>

{#
{% include 'create-statuslike-modal.html' with {'target': 'items_status', 'title': 'Create new resources status'|trans} %}
#}
{% include 'ownership-transfer-modal.html' %}
{% include 'onboarding-email-modal.html' %}

{# set variables for binary-settings template and other inputs with a data-model #}
{% set src = App.Teams.teamArr %}
{% set model = 'teams/current' %}

{# TAB 1 TEAM CONFIG #}
<div data-tabcontent='1' hidden>
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Usage Statistics'|trans }}</h3>
  <div class='pl-3 mb-5'>
    <div class='d-flex justify-content-between'>
      <div>
      {{ 'Members'|trans }}: {{ teamStats.active_users_count }} &ndash;
              {% trans %}
              Experiment
              {% plural teamStats.totxp %}
              Experiments
              {% endtrans %}
              : {{ teamStats.totxp }} ({{ teamStats.totxpts }} timestamped) &ndash; {{ 'Resources'|trans }}: {{ teamStats.totdb }}</div>
      <div><a href='/api/v2/reports?format=csv&scope=team' class='btn btn-primary'>{{ 'Generate report'|trans }}</a></div>
    </div>
  </div>

  <h3 class='p-2 pl-3 section-title'>{{ 'Configure your Team'|trans }}</h3>

  <div class='pl-3 mt-2'>
    <div class='d-flex justify-content-between'>
      <label for='announcement' class='col-form-label'>{{ 'Announcement'|trans }}</label>
      <input class='form-control col-md-4' data-trigger='blur' data-model='{{ model }}' data-target='announcement' type='text' id='announcement' name='announcement' value='{{ App.Teams.teamArr.announcement }}' />
    </div>
    <p class='smallgray'>{{ "The following text will be displayed to all users on all pages while it's active."|trans }}</p>
    <hr>

    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'force_exp_tpl',
      'label': 'Force experiment template use'|trans,
      'help': 'Users will be forced to select an existing Template, and will not be able to create a blank entry.'|trans} %}

    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'users_canwrite_experiments_categories',
      'label': 'Allow users to create and edit experiments categories'|trans} %}

    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'users_canwrite_experiments_status',
      'label': 'Allow users to create and edit experiments status'|trans} %}

    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'users_canwrite_resources_categories',
      'label': 'Allow users to create and edit resources categories'|trans} %}

    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'users_canwrite_resources_status',
      'label': 'Allow users to create and edit resources status'|trans} %}
  </div>

  {# ONBOARDING EMAIL #}
  {% include 'onboarding-email.html' %}

  {# FRESH USER INFO #}
  <h3 class='p-2 pl-3 section-title'>{{ 'Newcomer banner'|trans }}</h3>
  <div class='pl-3 mt-2'>
    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'newcomer_banner_active',
      'label': 'Activate newcomer banner'|trans,
      'help': 'Display a message to users that recently joined the team.'|trans} %}

    <div class='d-flex justify-content-between'>
      <label for='newcomer_threshold' class='col-form-label'>{{ 'Number of days after registration where a user is considered a newcomer'|trans }}</label>
      <input class='form-control col-md-4' data-trigger='blur' data-model='teams/current' data-target='newcomer_threshold' type='number' value='{{ App.Teams.teamArr.newcomer_threshold|e('html_attr') }}' name='newcomer_threshold' id='newcomer_threshold' />
    </div>
    <hr>

    <label for='newcomer_banner' class='col-form-label'>{{ 'Message to display'|trans }}</label>
    <div>
      {% if App.devMode -%}
      {# set no-unused-disable and text-content because removing or leaving text-content brings up error #}
        <!-- [html-validate-disable-block unique-landmark, element-permitted-content, no-deprecated-attr, prefer-native-element, no-unused-disable, element-permitted-content: suppress errors from tinymce] -->
      {%- endif %}
      <textarea style='height:400px' class='mceditable' name='newcomer_banner' id='newcomer_banner'>
        {{ src.newcomer_banner|raw }}
      </textarea>
    </div>
    <div class='mt-2 text-center'>
      <button type='button' data-action='patch-newcomer_banner' class='btn btn-primary'>{{ 'Save'|trans }}</button>
    </div>

  </div>
</div>

{# TAB 2 USER GROUPS #}
<div data-tabcontent='2' hidden>
  <p>{{ 'A User Group can contain users from different teams. Its main use is to later allow giving permissions to this group.'|trans }}</p>
  <p><a target='_blank' rel='noopener' class='external-link' href='https://doc.elabftw.net/admin-guide.html#groups-tab'>{{ 'Link to documentation'|trans }}</a></p>
  <h3 class='p-2 pl-3 section-title'>{{ 'Create user group'|trans }}</h3>

  {# CREATE A GROUP #}
  <form class='pl-3 mt-2 mb-5 input-group' id='createGroupForm' aria-label='{{ 'Add a group'|trans }}'>
    <div class='input-group-prepend'>
      <span class='input-group-text'>{{ 'Name'|trans }}</span>
    </div>
    <input type='text' required name='name' class='form-control' placeholder='{{ 'Project Monoco'|trans }}' aria-label='{{ 'Teamgroup name'|trans }}'>
    <div class='input-group-append'>
      <button class='btn btn-primary' data-action='create-teamgroup' type='submit'>{{ 'Create'|trans }}</button>
    </div>
  </form>

  {# SHOW EXISTING USER GROUPS #}
  <div id='team_groups_div'>
    <h3 class='p-2 pl-3 section-title'>{{ 'Existing user groups'|trans }}</h3>
    <div class='pl-3'>
      {% if not teamGroupsArr %}
        <p class='mt-3'>{{ 'No user group created yet.'|trans }}</p>
      {% endif %}
      {% for teamGroup in teamGroupsArr %}
        <div class='box'>
          <button type='button' class='btn float-right border-0 hl-hover-gray rounded p-2 lh-normal m-0' data-action='destroy-teamgroup' data-id='{{ teamGroup.id }}' title='{{ 'Delete'|trans }}'>
            <i class='fas fa-trash-alt'></i>
          </button>
          {% if App.devMode -%}
            <!-- [html-validate-disable-block prefer-native-element] -->
          {%- endif %}
          <h5><i class='fas fa-users'></i> <span data-id='{{ teamGroup.id }}' class='malleableTeamgroupName hl-hover'>{{ teamGroup.name }}</span></h5>
          <hr>
          <div class='d-flex flex-wrap'>
            {% for user in teamGroup.users %}
            <div class='user-badge mr-2'>{{ user.fullname }} <span title='{{ 'Delete'|trans }}' class='m-1' data-action='rmuser-teamgroup' data-userid='{{ user.userid }}' data-groupid='{{ teamGroup.id }}'><i class='fas fa-xmark color-blue'></i></span></div>
            {% endfor %}
          </div>
          {# ADD USER #}
          <form class='input-group mt-3' aria-label='{{ 'Add user to teamgroup'|trans }} {{ teamGroup.name }}'>
            <div class='input-group-prepend'>
              <span class='input-group-text'><i class='fas fa-magnifying-glass'></i></span>
            </div>
            <input type='text' class='form-control' required name='user' data-action='autocomplete' data-target='users' data-identifier='teamgroup-{{ teamGroup.id }}' placeholder='{{ 'User name'|trans }}' aria-label='{{ 'User name'|trans }}'>
            <div class='input-group-append'>
              <button class='btn btn-primary' data-action='adduser-teamgroup' data-groupid='{{ teamGroup.id }}' type='submit'>{{ 'Add user to teamgroup'|trans }}</button>
            </div>
          </form>
          <div id='autocompleteAnchorDiv_teamgroup-{{ teamGroup.id }}'></div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
{# END USER GROUPS #}

{# TAB 3 USERS #}
<div data-tabcontent='3' hidden>
  {% include 'editusers.html' %}
</div>

{# TAB 6 EXPORT #}
<div data-tabcontent='4' hidden>
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Export database items'|trans }}</h3>
  <div class='pl-3 mb-5'>
    <div class='d-flex justify-content-between'>
      <label for='categoryExport' class='col-form-label'>{{ 'Select what to export'|trans }}</label>
      <select class='form-control col-md-3' id='categoryExport' autocomplete='off'>
        {% for itemsType in App.itemsCategoryArr %}
          <option value='{{ itemsType.id }}'>{{ itemsType.title }}</option>
        {% endfor %}
      </select>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='categoryExportFormat' class='col-form-label'>{{ 'Select an export format'|trans }}</label>
      <select class='form-control col-md-3' id='categoryExportFormat' autocomplete='off'>
        <option value='eln'>{{ 'ELN Archive'|trans }}</option>
        <option value='zip'>{{ 'ZIP Archive'|trans }}</option>
        <option value='csv'>{{ 'CSV File'|trans }}</option>
        <option value='pdf'>{{ 'PDF File'|trans }}</option>
        <option value='qrpdf'>{{ 'QR codes PDF'|trans }}</option>
        <option value='json'>{{ 'JSON'|trans }}</option>
      </select>
    </div>
    <hr>

    <div class='my-2 text-center'>
      <button type='button' data-action='export-category' class='btn btn-primary'>{{ 'Export'|trans }}</button>
    </div>
  </div>

  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Export experiments of user'|trans }}</h3>
  <div class='pl-3 mb-5'>

    <div class='d-flex justify-content-between'>
      <label for='userExport' class='col-form-label'>{{ 'Select user'|trans }}</label>
      <select class='form-control col-md-3' id='userExport' autocomplete='off'>
        {% for user in allTeamUsersArr %}
          <option value='{{ user.userid }}'>{{ user.fullname }}</option>
        {% endfor %}
      </select>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='userExportFormat' class='col-form-label'>{{ 'Select an export format'|trans }}</label>
      <select class='form-control col-md-3' id='userExportFormat' autocomplete='off'>
        <option value='eln'>{{ 'ELN Archive'|trans }}</option>
        <option value='zip'>{{ 'ZIP Archive'|trans }}</option>
        <option value='csv'>{{ 'CSV File'|trans }}</option>
        <option value='pdf'>{{ 'PDF File'|trans }}</option>
        <option value='qrpdf'>{{ 'QR codes PDF'|trans }}</option>
        <option value='json'>{{ 'JSON'|trans }}</option>
      </select>
    </div>
    <hr>

    <div class='mt-2 text-center'>
      <button type='button' data-action='export-user' class='btn btn-primary'>{{ 'Export'|trans }}</button>
    </div>

  </div>

</div>

{# TAB 7 TAG MANAGER #}
<div data-tabcontent='5' hidden>
  <p>{{ 'From here you can add, edit or delete the tags for your team. Click the tag to edit it.'|trans }}</p>
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Configuration'|trans }}</h3>
  <div class='pl-3 mb-5'>
    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'user_create_tag',
      'label': 'Allow users to create new tags'|trans,
      'help': 'An admin account will always be able to create new tags.'|trans} %}
  </div>

  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Add a tag'|trans }}</h3>
  <div class='pl-3 mb-5'>

    <div class='input-group'>
      <input type='text' id='adminAddTagInput' class='form-control' placeholder='{{ 'Add a tag'|trans }}' aria-label='{{ 'Add a tag'|trans }}'>
      <div class='input-group-append'>
        <button class='btn btn-primary' data-action='admin-add-tag' type='button'>{{ 'Save'|trans }}</button>
      </div>
    </div>
  </div>

  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Manage tags of the team'|trans }}</h3>
  <div class='pl-3'>

    <div class='mt-2 table-container' id='tagMgrDiv'>
      {% include 'filter-input-snippet.html' with {'target': 'tagManagerTable'} %}
      <table class='table' aria-label='{{ 'Tags of the team'|trans }}' data-table-sort='true'>
        <thead>
          <tr>
            <th scope='col'>{{ 'Tag'|trans }}</th>
            <th scope='col'>{{ 'Occurence'|trans }}</th>
            <th scope='col'>{{ 'Show tagged experiments'|trans }}</th>
            <th scope='col'>{{ 'Show tagged items'|trans }}</th>
            <th scope='col'>{{ 'Delete'|trans }}</th>
          </tr>
        </thead>
        <tbody id='tagManagerTable'>
          {# for this table, sort the tags by popularity (item_count) #}
          {% for tag in tagsArr|sort((a, b) => b.item_count <=> a.item_count) %}
            {# id data attribute is repeated from the editable tag button so we can grab it to remove the row after update lead to deduplicate #}
            <tr data-id='{{ tag.id }}'>
              <th data-label='{{ 'Tag'|trans }}' scope='row' class='border-right-0'><button type='button' class='btn tag editable hl-hover lh-normal border-0' data-id='{{ tag.id }}'>{{ tag.tag }}</button></th>
              <td data-label='{{ 'Occurence'|trans }}' class='align-middle'>{{ tag.item_count }}</td>
              <td data-label='{{ 'Show tagged experiments'|trans }}'>
                <a title='{{ 'Show tagged experiments'|trans }}' aria-label='{{ 'Show tagged experiments'|trans }}' href='experiments.php?mode=show&amp;tags%5B%5D={{ tag.tag|url_encode }}' class='btn hl-hover-gray lh-normal p-1 my-n1'>
                  <i class='fas fa-external-link-square-alt'></i>
                </a>
              </td>
              <td data-label='{{ 'Show tagged items'|trans }}'>
                <a title='{{ 'Show tagged items'|trans }}' aria-label='{{ 'Show tagged items'|trans }}' href='database.php?mode=show&amp;tags%5B%5D={{ tag.tag|url_encode }}' class='btn hl-hover-gray lh-normal p-1 my-n1'>
                  <i class='fas fa-external-link-square-alt'></i>
                </a>
              </td>
              <td data-label='{{ 'Delete'|trans }}'>
                <button type='button' class='btn hl-hover-gray lh-normal p-1 my-n1' data-action='destroy-tag' data-tagid='{{ tag.id }}' title='{{ 'Delete'|trans }}' aria-label='{{ 'Delete'|trans }}'><i class='fas fa-trash-alt'></i></button>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{# TAB 8 BATCH ACTIONS #}
<div data-tabcontent='6' id='batchActions' hidden>
  <p>{{ 'From here you can perform actions on entire group of entries at once.'|trans }}</p>
  <hr>
  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Resources by category'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
  {% for itemsCategory in App.itemsCategoryArr %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
      <label for='batch-itemsTypes-{{ itemsCategory.id }}' class='col-form-label clickable'>{{ itemsCategory.title }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' name='items_categories' value='{{ itemsCategory.id }}' autocomplete='off' data-action='update-counter-value' id='batch-itemsTypes-{{ itemsCategory.id }}'>
        <span class='slider'></span>
      </label>
    </div>
  {% endfor %}
    </div>
    <hr>

  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Resources status'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
  {% for status in itemsStatusArr %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
      <label for='batch-itemsStatus-{{ status.id }}' class='col-form-label clickable'>{{ status.title }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' name='items_status' value='{{ status.id }}' autocomplete='off' data-action='update-counter-value' id='batch-itemsStatus-{{ status.id }}'>
        <span class='slider'></span>
      </label>
    </div>
  {% endfor %}
    </div>

  <hr>
  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Resources tags'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
    {# for this tab, sort the tags in alphabetical order, case-insensitive #}
    {% for tag in tagsArr|sort((a, b) => a.tag|lower <=> b.tag|lower) %}
      <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
        <label for='batch-itemsTags-{{ tag.id }}' class='col-form-label clickable'>{{ tag.tag }}</label>
        <label class='switch ucp-align'>
          <input type='checkbox' name='items_tags' value='{{ tag.id }}' autocomplete='off' data-action='update-counter-value' id='batch-itemsTags-{{ tag.id }}'>
          <span class='slider'></span>
        </label>
      </div>
    {% endfor %}
  </div>

  <hr>
  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Experiments categories'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
  {% for experimentsCategory in App.experimentsCategoryArr %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
      <label for='batch-experimentsCategories-{{ experimentsCategory.id }}' class='col-form-label clickable'>{{ experimentsCategory.title }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' name='experiments_categories' value='{{ experimentsCategory.id }}' autocomplete='off' data-action='update-counter-value' id='batch-experimentsCategories-{{ experimentsCategory.id }}'>
        <span class='slider'></span>
      </label>
    </div>
  {% endfor %}
    </div>
    <hr>

  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Experiments status'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
  {% for status in statusArr %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
      <label for='batch-experimentsStatus-{{ status.id }}' class='col-form-label clickable'>{{ status.title }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' name='experiments_status' value='{{ status.id }}' autocomplete='off' data-action='update-counter-value' id='batch-experimentsStatus-{{ status.id }}'>
        <span class='slider'></span>
      </label>
    </div>
  {% endfor %}
    </div>

  <hr>
  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Experiments tags'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
    {% for tag in tagsArr|sort((a, b) => a.tag|lower <=> b.tag|lower) %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
        <label for='batch-experimentsTags-{{ tag.id }}' class='col-form-label clickable'>{{ tag.tag }}</label>
        <label class='switch ucp-align'>
          <input type='checkbox' name='experiments_tags' value='{{ tag.id }}' autocomplete='off' data-action='update-counter-value' id='batch-experimentsTags-{{ tag.id }}'>
          <span class='slider'></span>
        </label>
      </div>
    {% endfor %}
  </div>
  <hr>

  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Owner'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
    {% for user in allTeamUsersArr %}
      <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
        <label for='batch-users-{{ user.userid }}' class='col-form-label clickable'>{{ user.fullname }} ({{ user.email }})</label>
        <label class='switch ucp-align'>
          <input type='checkbox' name='users' value='{{ user.userid }}' autocomplete='off' data-action='update-counter-value' id='batch-users-{{ user.userid }}'>
          <span class='slider'></span>
        </label>
      </div>
    {% endfor %}
  </div>
  <hr>
  </section>

  <div class='row mx-0 mt-3'><p>{{ 'With selected:'|trans }}</p></div>
  {# First line #}
  <div class='row mx-0 mb-3'>
    {# Action buttons #}
    <button data-action='run-action-selected' data-what='forcelock' type='button' class='btn btn-primary mr-1 mb-2'>{{ 'Lock'|trans }}</button>
    <button data-action='run-action-selected' data-what='forceunlock' type='button' class='btn btn-primary mr-1 mb-2'>{{ 'Unlock'|trans }}</button>
    <button data-action='toggle-modal' type='button' class='btn btn-primary mr-1 mb-2' data-target='ownerModal'>{{ 'Transfer ownership'|trans }}</button>
    <button data-action='run-action-selected' data-what='archive' type='button' class='btn btn-secondary mr-1 mb-2'>{{ 'Archive'|trans }}</button>
    <button data-action='run-action-selected' data-what='unarchive' type='button' class='btn btn-secondary mr-1 mb-2'>{{ 'Unarchive'|trans }}</button>
    <button data-action='run-action-selected' data-what='destroy' type='button' class='btn btn-danger mr-1 mb-2'>{{ 'Delete'|trans }}</button>
    <button data-action='run-action-selected' data-what='restore' type='button' class='btn btn-primary mr-1 mb-2'>{{ 'Restore'|trans }}</button>
  </div>

  <h4>{{ 'Set permissions'|trans }}</h4>
  <div class='row'>
    <div class='col-md-6 mb-3'>
      <label for='masscan_select_base'>{{ 'Base'|trans }}</label>
      <p class='smallgray'>{{ 'This setting sets a baseline upon which you can add more permissions by selecting teams, user groups or users below.'|trans }}</p>
      <select id='masscan_select_base' class='form-control'>
        {% for key, value in visibilityArr %}
          <option value='{{ key }}'>{{ value|trans }}</option>
        {% endfor %}
      </select>
      {# TEAMS #}
      <label for='masscan_select_teams' class='mt-2'>+ {{ 'Teams'|trans }}</label> <p class='smallgray d-inline'>{{ '(hold %sctrl%s key to select multiple entries, %sctrl%s + click to deselect a selected entry)'|trans|format('<kbd>', '</kbd>', '<kbd>', '</kbd>')|raw }}</p>
      <p class='smallgray'>{{ 'Selecting a team here will give access to all members of this team.'|trans }}</p>
      <select id='masscan_select_teams' multiple class='form-control' autocomplete='off'>
        {% for team in visibleTeamsArr %}
          <option value='team:{{ team.id }}'>{{ 'Team'|trans }} - {{ team.name }}</option>
        {% endfor %}
      </select>
      {# USERGROUPS #}
      <label for='masscan_select_teamgroups' class='mt-2'>+ {{ 'User Groups'|trans }}</label> <p class='smallgray d-inline'>{{ '(hold %sctrl%s key to select multiple entries, %sctrl%s + click to deselect a selected entry)'|trans|format('<kbd>', '</kbd>', '<kbd>', '</kbd>')|raw }}</p>
      <p class='smallgray'>{{ 'Selecting a teamgroup here will give access to all users part of this teamgroup.'|trans }}</p>
      <select {{ allTeamgroupsArr|length == 0 ? 'disabled' }} id='masscan_select_teamgroups' multiple class='form-control' autocomplete='off'>
        {% for tg in allTeamgroupsArr %}
          <option value='teamgroup:{{ tg.id }}'>{{ 'Teamgroup'|trans }} - {{ tg.name }}</option>
        {% endfor %}
      </select>
      {# USERS #}
      <label for='masscan_select_users' class='mt-2'>+ {{ 'Users'|trans }}</label> <p class='smallgray d-inline'>{{ 'Allow individual users to access this entry.'|trans }}</p>
      <ul class='list-group mb-1' id='masscan_list_users'></ul>
      {# add user to permissions input #}
      <div class='input-group'>
        <input id='masscan_select_users' type='text' data-identifier='masscan' data-action='autocomplete' data-target='users' class='form-control' placeholder='{{ 'Add user'|trans }}' autocomplete='off'>
        <div class='input-group-append'>
          <button class='btn btn-primary' type='button' data-rw='canread' data-identifier='masscan' data-action='add-user-to-permissions'>{{ 'Add'|trans }}</button>
        </div>
      </div>
      <div id='autocompleteAnchorDiv_masscan'></div>

      <hr>
      {# SAVE AND RESET BUTTONS #}
      <div class='mt-3'>
        <button data-action='run-action-selected' type='button' data-what='setcanread' class='btn btn-primary mr-1 mb-2'>{{ 'Set read permissions'|trans }}</button>
        <button data-action='run-action-selected' type='button' data-what='setcanwrite' class='btn btn-primary mr-1 mb-2'>{{ 'Set write permissions'|trans }}</button>
      </div>
    </div>
  </div>
</div>

{% endblock body %}
